<template>
  <div class="box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="最新文章" name="zui">
        <div class="dd" v-for="(item, index) in data" :key="index">
          <el-card class="box-card">
            <div class="ccc">
              <div class="img">
                <img :src="item.cover" alt="" />
              </div>
              <div class="text">
                <h2>{{ item.title }}</h2>
                <p>{{ item.summary }}</p>
                <span>{{ item.published_at }}</span>
                <span>{{ item.column_name }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="大公司" name="da">
        <div
          class="dd"
          v-for="(item, index) in data"
          :key="index"
          v-if="item.column_name == '大公司'"
        >
          <el-card class="box-card">
            <div class="ccc">
              <div class="img">
                <img :src="item.cover" alt="" />
              </div>
              <div class="text">
                <h2>{{ item.title }}</h2>
                <p>{{ item.summary }}</p>
                <span>{{ item.published_at }}</span>
                <span>{{ item.column_name }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="消费" name="xiao">
        <div
          class="dd"
          v-for="(item, index) in data"
          :key="index"
          v-if="item.column_name == '消费'"
        >
          <el-card class="box-card">
            <div class="ccc">
              <div class="img">
                <img :src="item.cover" alt="" />
              </div>
              <div class="text">
                <h2>{{ item.title }}</h2>
                <p>{{ item.summary }}</p>
                <span>{{ item.published_at }}</span>
                <span>{{ item.column_name }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="娱乐" name="yu">
        <div
          class="dd"
          v-for="(item, index) in data"
          :key="index"
          v-if="item.column_name == '娱乐'"
        >
          <el-card class="box-card">
            <div class="ccc">
              <div class="img">
                <img :src="item.cover" alt="" />
              </div>
              <div class="text">
                <h2>{{ item.title }}</h2>
                <p>{{ item.summary }}</p>
                <span>{{ item.published_at }}</span>
                <span>{{ item.column_name }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="前沿技术" name="qian">
        <div
          class="dd"
          v-for="(item, index) in data"
          :key="index"
          v-if="item.column_name == '前沿技术'"
        >
          <el-card class="box-card">
            <div class="ccc">
              <div class="img">
                <img :src="item.cover" alt="" />
              </div>
              <div class="text">
                <h2>{{ item.title }}</h2>
                <p>{{ item.summary }}</p>
                <span>{{ item.published_at }}</span>
                <span>{{ item.column_name }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="汽车交通" name="qi">
        <div
          class="dd"
          v-for="(item, index) in data"
          :key="index"
          v-if="item.column_name == '汽车交通'"
        >
          <el-card class="box-card">
            <div class="ccc">
              <div class="img">
                <img :src="item.cover" alt="" />
              </div>
              <div class="text">
                <h2>{{ item.title }}</h2>
                <p>{{ item.summary }}</p>
                <span>{{ item.published_at }}</span>
                <span>{{ item.column_name }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="区块链" name="qu">
        <div
          class="dd"
          v-for="(item, index) in data"
          :key="index"
          v-if="item.column_name == '区块链'"
        >
          <el-card class="box-card">
            <div class="ccc">
              <div class="img">
                <img :src="item.cover" alt="" />
              </div>
              <div class="text">
                <h2>{{ item.title }}</h2>
                <p>{{ item.summary }}</p>
                <span>{{ item.published_at }}</span>
                <span>{{ item.column_name }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="技能Get" name="get">
        <div
          class="dd"
          v-for="(item, index) in data"
          :key="index"
          v-if="item.column_name == '技能Get'"
        >
          <el-card class="box-card">
            <div class="ccc">
              <div class="img">
                <img :src="item.cover" alt="" />
              </div>
              <div class="text">
                <h2>{{ item.title }}</h2>
                <p>{{ item.summary }}</p>
                <span>{{ item.published_at }}</span>
                <span>{{ item.column_name }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import list from '@/assets/news.json'
export default {
  data() {
    return {
      data: list.items,
      activeName: 'zui',
      item: new Date(),
    }
  },
  mounted() {
    var arr = list.items
    arr.forEach((item) => {
      var date = item.published_at
      var arr = date.split('T')
      var d = arr[0]
      var darr = d.split('-')

      var t = arr[1]
      var tarr = t.split('.000')
      var marr = tarr[0].split(':')

      var dd =
        parseInt(darr[0]) +
        '/' +
        parseInt(darr[1]) +
        '/' +
        parseInt(darr[2]) +
        ' ' +
        parseInt(marr[0]) +
        ':' +
        parseInt(marr[1]) +
        ':' +
        parseInt(marr[2])
      item.published_at = dd
    })
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
  },
  computed: {},
}
</script>

<style scoped lang="scss">
.box {
  width: 50%;
  margin: 100px auto;
}
.dd {
  width: 100%;

  .el-card {
    margin: 4px;
    .ccc {
      width: 100%;
      display: flex;
      .img {
        width: 300px;
        height: 200px;
        padding: 4px;
        img {
          width: 100%;
          height: 200px;
        }
      }
      .text {
        flex: 1;
        padding: 6px;
        p {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
